<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>仿哔哩哔哩页面</title>
   <link rel="shortcut icon" href="./image/favicon.ico" type="image/x-icon">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/sj4.css">
</head>

<body class="bg-[#e6f7ff]">
    <!-- 导航栏 -->
    <div class="nav bg-white flex items-center">
        <ul class="flex list-none" style="width: 40%;">
            <li class="mr-5"><a href="./yxt.html" class="text-gray-700 hover:text-blue-500">首页</a></li>
            <li class="mr-5"><a href="./sj.html" class="text-gray-700 hover:text-blue-500">番剧</a></li>
            <li class="mr-5"><a href="#" class="text-gray-700 hover:text-blue-500">直播</a></li>
            <li class="mr-5"><a href="#" class="text-gray-700 hover:text-blue-500">游戏中心</a></li>
            <li class="mr-5"><a href="#" class="text-gray-700 hover:text-blue-500">会员购</a></li>
            <li class="mr-5"><a href="./rlb.html" class="text-gray-700 hover:text-blue-500">漫画</a></li>
            <li class="mr-5"><a href="#" class="text-gray-700 hover:text-blue-500">赛事</a></li>
            <li class="mr-5"><a href="#" class="text-gray-700 hover:text-blue-500">读书日</a></li>
            <li class="mr-5"><a href="#" class="text-gray-700 hover:text-blue-500">下载客户端</a></li>
        </ul>
        <div class="search-box flex-1 text-center">
            <input type="text" placeholder="斩赤红之瞳第二季" class="border border-gray-300 rounded-md px-3">
        </div>
        <div class="nav-right flex items-center">
            <a href="./sj2.html" class="text-gray-700 hover:text-blue-500 mx-3">登录</a>
            <a href="#" class="text-gray-700 hover:text-blue-500 mx-3">大会员</a>
            <a href="#" class="text-gray-700 hover:text-blue-500 mx-3">消息</a>
            <a href="./sj4.html" class="text-gray-700 hover:text-blue-500 mx-3">动态</a>
            <a href="#" class="text-gray-700 hover:text-blue-500 mx-3">收藏</a>
            <a href="#" class="text-gray-700 hover:text-blue-500 mx-3">历史</a>
            <a href="#" class="text-gray-700 hover:text-blue-500 mx-3">创作中心</a>
            <a href="#" class="bg-orange-500 text-white px-3 py-1 rounded-md mx-3"
                style="background-color: #fb7299;">投稿</a>
        </div>
    </div>
    <div class="main-container">
        <!-- 主内容区域 -->
        <div class="main flex p-5">
            <!-- 左侧区域 -->
            <div class="left-section w-1/5 p-3">
                <div class="login-box bg-[white] p-5 text-center rounded-md">
                    <img src="https://s1.hdslb.com/bfs/static/stone-free/dyn-home/assets/unlogin.png@1c.avif" alt="登录图标"
                        class="mx-auto mb-3" style="width: 160px;">
                    <p class="text-sm text-gray-600 mb-1">探索属于你的新世界</p>
                    <p class="text-sm text-gray-600 mb-3">赶快注册或登录吧</p>
                    <a href="./sj2.html"><button class="bg-gray-100 w-full py-2 rounded-md mb-2" style="color: #00aeec;">注册</button></a>
                    <a href="./yxt.html"><button class="bg-blue-500 text-white w-full py-2 rounded-md"
                        style="background-color: #00aeec;">登录</button></a>
                </div>
            </div>
            <!-- 中间区域 -->
            <div class="center-section w-3/6 p-0">
                <!-- 动态内容 -->
                <div class="dynamic bg-white p-4 rounded-md">
                    <div style="color: #00aeec; font-size: 15px;">热门动态</div>
                    <div class="dynamic-header flex items-center mb-3">

                        <img src="https://i1.hdslb.com/bfs/face/2254162161a60b528cfec449f3450409a81ebc37.jpg@96w_96h_1c_1s.webp"
                            alt="用户头像" class="rounded-full mr-3">
                        <span class="text-sm text-gray-600 mr-3"
                            style="color: #fb7299; font-size: 15px;font-weight: bolder;">哔哩哔哩番剧</span>
                        <span class="text-sm text-gray-600">2022年10月25日</span>
                        <button class="ml-auto text-blue-500">+ 关注</button>
                    </div>
                    <div class="dynamic-content mb-3" >
                        <p class="text-sm text-gray-700" style="font-size: 13px;">一部关于电影浪漫的作品，欢迎光临梦想与拼搏的世界！ 动画电影#酷爱电影的庞波小姐# 
                        div 将于2022年11月1日 0:00 bilibili独家播出~ 传送门: <input type="checkbox" checked> 酷爱电影的庞波小姐</p>
                            <div style=" position: relative; left: 50px;">
                        <img src="https://i0.hdslb.com/bfs/new_dyn/5a04ed359c1d2308dc8e120744e10964928123.png@420w_560h_1e_1c.avif"
                            alt="动态图片" class="mt-3" style="width: 35%;">
                        </div>
                    </div>
                    <div class="dynamic-footer flex justify-between text-sm text-gray-600">
                        <div class="flex items-center"><img src="./image/评论-24_爱给网_aigei_com.png" alt="评论" class="mr-2">
                            114
                        </div>
                        <div class="flex items-center"><img src="./image/转发_爱给网_aigei_com.png" alt="分享" class="mr-2">
                            178
                        </div>
                        <div class="flex items-center"><img src="./image/点赞.png" alt="点赞" class="mr-2">
                            4837</div>
                    </div>
                </div>
                <div class="dynamic bg-white p-4 rounded-md" >
                    <div class="dynamic-header flex items-center mb-3">
                        <img src="https://i1.hdslb.com/bfs/face/2254162161a60b528cfec449f3450409a81ebc37.jpg@96w_96h_1c_1s.webp" alt="用户头像" class="rounded-full mr-3">
                        <span class="text-sm text-gray-600 mr-3">哔哩哔哩漫画</span>
                        <span class="text-sm text-gray-600">2022年10月22日</span>
                        <button class="ml-auto text-blue-500">+ 关注</button>
                    </div>
                    <div class="dynamic-content mb-3">
                        <p class="text-sm text-gray-700">【#哔哩哔哩漫画#作品推荐】《有兽焉》: <input type="checkbox" checked> 网页链接
                            人间有神兽，来自九重天~
                            随着科技的发展，往日威风凛凛的神兽们日子大不如前。神兽四不像奉命下凡，去解救流落人间的落魄神兽。在凡间，他遇到了走投无路的老同事貔貅，不得志的酒友兔爷，被贬下凡的金银角兄弟...
                            他们之间会发生怎样的故事？欢迎来到毛球们的世界！</p>
                        <div style="overflow: hidden;">
                            <img src="https://i0.hdslb.com/bfs/new_dyn/e5f088fbc356a2b1393dcdab9007a68f326499679.jpg@264w_264h_1e_1c.avif"
                                alt="图片" class="mt-3" style="width: 20%;float: left;">
                            <img src="https://i0.hdslb.com/bfs/new_dyn/5ebd6c214cbf3cb902d29c51af062a8f326499679.jpg@264w_264h_1e_1c.avif"
                                alt="" class="mt-3" style="width: 20%;">
                            <img src="https://i0.hdslb.com/bfs/new_dyn/5b8e509bb18785dd9b77deede4d92e01326499679.jpg@264w_264h_1e_1c.avif"
                                alt="" class="mt-3" style="width: 20%;float: left;">
                            <img src="https://i0.hdslb.com/bfs/new_dyn/43340c79190c06255ba3ffd68b4ff0a1326499679.jpg@264w_264h_1e_1c.avif"
                                alt="" class="mt-3" style="width: 20%; float: left;">
                        </div>
                    </div>

                    <div>
                        <div class="dynamic-footer flex justify-between text-sm text-gray-600">
                            <div class="flex items-center"><img src="./image/评论-24_爱给网_aigei_com.png" alt="评论"
                                    class="mr-2"> 114
                            </div>
                            <div class="flex items-center"><img src="./image/转发_爱给网_aigei_com.png" alt="分享"
                                    class="mr-2"> 178
                            </div>
                            <div class="flex items-center"><img src="./image/点赞.png" alt="点赞" class="mr-2">
                                4837</div>
                        </div>
                    </div>
                </div>
                <div class="dynamic bg-white p-4 rounded-md">
                    <div style="color: #00aeec; font-size: 15px;">热门动态</div>
                    <div class="dynamic-header flex items-center mb-3">

                        <img src="https://i1.hdslb.com/bfs/face/2254162161a60b528cfec449f3450409a81ebc37.jpg@96w_96h_1c_1s.webp"
                            alt="用户头像" class="rounded-full mr-3">
                        <span class="text-sm text-gray-600 mr-3"
                            style="color: #fb7299; font-size: 15px;font-weight: bolder;">哔哩哔哩番剧</span>
                        <span class="text-sm text-gray-600">2022年10月25日</span>
                        <button class="ml-auto text-blue-500">+ 关注</button>
                    </div>
                    <div class="dynamic-content mb-3" >
                        <p class="text-sm text-gray-700" style="font-size: 13px;">一部关于电影浪漫的作品，欢迎光临梦想与拼搏的世界！ 动画电影#酷爱电影的庞波小姐# 
                        div 将于2022年11月1日 0:00 bilibili独家播出~ 传送门: <input type="checkbox" checked> 酷爱电影的庞波小姐</p>
                            <div style=" position: relative; left: 50px;">
                        <img src="https://i0.hdslb.com/bfs/new_dyn/5a04ed359c1d2308dc8e120744e10964928123.png@420w_560h_1e_1c.avif"
                            alt="动态图片" class="mt-3" style="width: 35%;">
                        </div>
                    </div>
                    <div class="dynamic-footer flex justify-between text-sm text-gray-600">
                        <div class="flex items-center"><img src="./image/评论-24_爱给网_aigei_com.png" alt="评论" class="mr-2">
                            114
                        </div>
                        <div class="flex items-center"><img src="./image/转发_爱给网_aigei_com.png" alt="分享" class="mr-2">
                            178
                        </div>
                        <div class="flex items-center"><img src="./image/点赞.png" alt="点赞" class="mr-2">
                            4837</div>
                    </div>
                </div>
                <div class="dynamic bg-white p-4 rounded-md" >
                    <div class="dynamic-header flex items-center mb-3">
                        <img src="https://i1.hdslb.com/bfs/face/2254162161a60b528cfec449f3450409a81ebc37.jpg@96w_96h_1c_1s.webp" alt="用户头像" class="rounded-full mr-3">
                        <span class="text-sm text-gray-600 mr-3">哔哩哔哩漫画</span>
                        <span class="text-sm text-gray-600">2022年10月22日</span>
                        <button class="ml-auto text-blue-500">+ 关注</button>
                    </div>
                    <div class="dynamic-content mb-3">
                        <p class="text-sm text-gray-700">【#哔哩哔哩漫画#作品推荐】《有兽焉》: <input type="checkbox" checked> 网页链接
                            人间有神兽，来自九重天~
                            随着科技的发展，往日威风凛凛的神兽们日子大不如前。神兽四不像奉命下凡，去解救流落人间的落魄神兽。在凡间，他遇到了走投无路的老同事貔貅，不得志的酒友兔爷，被贬下凡的金银角兄弟...
                            他们之间会发生怎样的故事？欢迎来到毛球们的世界！</p>
                        <div style="overflow: hidden;">
                            <img src="https://i0.hdslb.com/bfs/new_dyn/e5f088fbc356a2b1393dcdab9007a68f326499679.jpg@264w_264h_1e_1c.avif"
                                alt="图片" class="mt-3" style="width: 20%;float: left;">
                            <img src="https://i0.hdslb.com/bfs/new_dyn/5ebd6c214cbf3cb902d29c51af062a8f326499679.jpg@264w_264h_1e_1c.avif"
                                alt="" class="mt-3" style="width: 20%;">
                            <img src="https://i0.hdslb.com/bfs/new_dyn/5b8e509bb18785dd9b77deede4d92e01326499679.jpg@264w_264h_1e_1c.avif"
                                alt="" class="mt-3" style="width: 20%;float: left;">
                            <img src="https://i0.hdslb.com/bfs/new_dyn/43340c79190c06255ba3ffd68b4ff0a1326499679.jpg@264w_264h_1e_1c.avif"
                                alt="" class="mt-3" style="width: 20%; float: left;">
                        </div>
                    </div>

                    <div>
                        <div class="dynamic-footer flex justify-between text-sm text-gray-600">
                            <div class="flex items-center"><img src="./image/评论-24_爱给网_aigei_com.png" alt="评论"
                                    class="mr-2"> 114
                            </div>
                            <div class="flex items-center"><img src="./image/转发_爱给网_aigei_com.png" alt="分享"
                                    class="mr-2"> 178
                            </div>
                            <div class="flex items-center"><img src="./image/点赞.png" alt="点赞" class="mr-2">
                                4837</div>
                        </div>
                    </div>
                </div>
                
            </div>
            <!-- 右侧区域 -->
            <div class="right-section p-3 " style="width: 25%; height: 260px; ">
                <div class="community-center bg-[#00a1e4]  rounded-md mb-5">
                    <img src="https://i0.hdslb.com/bfs/vc/9c699f2acbcad00197e92c401b835d2c6aba8a55.png@616w_286h_!web-dynamic.webp"
                        alt="社区中心图" class="w-full" style="border-radius: 15%;height: 150px;">
                </div>
                <div class="login-tip bg-[#00a1e4] p-4 rounded-md"
                    style="position: fixed; width: 350px; top: 70%; left: 70%;">
                    <p class="text-sm text-white mb-2">登录哔哩哔哩，高清视频免费看！</p>
                    <p class="text-sm text-white mb-3">更多登录后权益等你解锁</p>
                    <a href="./sj2.html"><button class="bg-white w-full py-2 rounded-md">立即登录</button></a>
                </div>
            </div>
            
        </div>
    </div>
    <!-- 页脚 -->
        <footer style="background-color: black; width: 100%; padding-top: 30px;">
            <div>
                <span>营业执照</span>
                <span>信息网络传播视听节目许可证：0910417</span>
                <a href="#">网络文化经营许可证 沪网文【2022】1848-115号</a>
                <span>广播电视节目制作经营许可证：（沪）字第01248号</span>
                <span>增值电信业务经营许可证 沪B2-20100043</span>
            </div>
            <div>
                <a href="#">互联网ICP备案：沪ICP备13002172号-3</a>
                <a href="#">出版物经营许可证 沪批字第U6699 号</a>
                <span>互联网药品信息服务资格证 沪-非经营性-2022-0011</span>
                <span>营业性演出许可证 沪市文演（经）00-2253 |</span>
            </div>
            <div>
                <a href="#">不良信息举报邮箱：help@bilibili.com</a>
                <a href="#">涉未成年举报邮箱：teenprotect@bilibili.com</a>
                <span>不良信息举报电话：4006262233转3</span>
                <a href="#">上海互联网举报中心 |</a>
                <a href="#">12345政务服务便民热线 |</a>
            </div>
            <div>
                <a href="#">沪公网安备31011002002436号|</a>
                <a href="#">儿童色情信息举报专区 |</a>
                <a href="#">扫黄打非举报</a>
            </div>
            <div>
                <a href="#">网信算备310110764385705230011号</a>
                <a href="#">网信算备310110764385702230013号</a>
            </div>
            <div>
                <span>网上有害信息举报专区：</span>
                <a href="#">中国互联网违法和不良信息举报中心</a>
                <span>亲爱的市民朋友，上海警方反诈劝阻电话“96110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听。</span>
            </div>
            <div>
                <span>公司名称：上海宽娱数码科技有限公司 |</span>
                <span>公司地址：上海市杨浦区政立路489号 |</span>
                <span>电话：021-25099888</span>
            </div>
            <div>
                <img src="https://i0.hdslb.com/bfs/activity-plat/static/20210729/df3e2ff90b315fca2f8d24a29cb68a47/Dm9M9DZArS.png" alt="">
                <img src="https://i0.hdslb.com/bfs/activity-plat/static/20210729/df3e2ff90b315fca2f8d24a29cb68a47/2xfuvJItn3.png" alt="">
                <img src="https://i0.hdslb.com/bfs/activity-plat/static/20210729/df3e2ff90b315fca2f8d24a29cb68a47/iUlvDrrAnu.png" alt="">
            </div>
        </footer>
       
</body>

</html>